<template>
	<view class="app-user-promote-extract e-rela" :style="[AppSkinVar]">
		<view class="e-p-l-30 e-p-r-30 e-p-t-60 e-p-b-60 bg-white e-radius-20 e-rela e-m-b-20">
			<view class="e-m-b-20">
				<text class="e-font-30">{{ $t('user.提现金额') }}</text>
			</view>
			<view class="e-p-t-20 e-p-b-20 e-flex">
				<text class="fw-600 e-font-48 c-35">{{ $unitEn }}</text>
				<e-input v-model="form.cashmoney" fontSize="32rpx" :customStyle="{ fontWeight: 600 }" type="number" border="none" :placeholder="$t('user.请输入提现金额')" />
			</view>
			<e-line></e-line>
			<view class="e-flex e-flex-between e-p-t-20">
				<text class="c-secondary e-font-26">{{ $t('user.可提现余额') }}{{ info?.rewardAll || 0 }}</text>
				<text class="c-primary white-nowrap" @tap="form.cashmoney = info.rewardAll">{{ $t('user.全部提现') }}</text>
			</view>
		</view>
		<view class="bg-white e-p-l-30 e-p-r-30 e-p-t-20 e-p-b-20">
			<e-form labelPosition="left" :borderBottom="false" errorType="toast" labelWidth="auto" :model="form" :rules="rules" ref="formRef">
				<e-form-item label="账户名称" prop="bankname">
					<e-input v-model="form.bankname" inputAlign="right" placeholder="请输入账户名称" border="none"></e-input>
				</e-form-item>
				<e-form-item label="开户银行" prop="bankaddr">
					<e-input v-model="form.bankaddr" inputAlign="right" placeholder="请输入开户银行" border="none"></e-input>
				</e-form-item>
				<e-form-item label="账户号码" prop="bankcode">
					<e-input v-model="form.bankcode" inputAlign="right" type="number" placeholder="请输入账户号码" border="none"></e-input>
				</e-form-item>
			<!-- 	<e-form-item label="法定代表人" prop="realname">
					<e-input v-model="form.realname" inputAlign="right" placeholder="请输入法定代表(单位负责人)" border="none"></e-input>
				</e-form-item>
				<e-form-item label="基本存款账户编号" prop="bankcode">
					<e-input v-model="form.bankcode" inputAlign="right" type="number" placeholder="请输入" border="none"></e-input>
				</e-form-item> -->
			</e-form>
		</view>

		<view class="fixed-bottom bg-white e-p-30">
			<e-button size="large" type="primary" shape="circle" :text="$t('user.立即提现')" @click="extract" :throttleTime="1000"></e-button>
		</view>
		<password-popup ref="passwordRef" :show="passwordShow" @confirm="confirm" @close="passwordShow = false"></password-popup>
	</view>
</template>

<script setup>
import { ref,computed } from 'vue';
import { getPromoteRewardCount, postPromoteExtract } from '@/common/request/api';
import { useCurrentInstance } from '@/common/hooks';
import { useUser } from '@/common/stores';
import { storeToRefs } from 'pinia';
import { onLoad } from '@dcloudio/uni-app';
import { shield } from '@/common/utils';

const ctx = useCurrentInstance();

const info = ref({});

const show = ref(false);

const passwordShow = ref(false);

const form = ref({
	cashmoney:'',
	bankname: '',
	bankaddr:'',
	bankcode:''
});
const formRef = ref()
const rules = computed(() => {
	return {
		bankname: {
			type: 'string',
			required: true,
			message: '请输入账户名称',
			trigger: ['blur']
		},
		bankaddr: {
			type: 'string',
			required: true,
			message: '请输入开户银行',
			trigger: ['blur']
		},
		bankcode: {
			type: 'string',
			required: true,
			message: '请输入账户号码',
			trigger: ['blur']
		},
		// idcard: {
		// 	type: 'string',
		// 	required: true,
		// 	message: '请输入法定代表(单位负责人)',
		// 	trigger: ['blur']
		// },
		// bankaddr: {
		// 	type: 'string',
		// 	required: true,
		// 	message: '请输入基本存款账户编号',
		// 	trigger: ['blur']
		// }
	};
});

const passwordRef = ref();
const extract = () => {
	if (!form.value.cashmoney) {
		ctx.$toastApp(ctx.$t('user.请输入提现金额'));
		return;
	}
	formRef.value?.validate().then((type) => {
		if (type) {
			passwordShow.value = true;
		}
	});
};
const confirm = (payword) => {
	passwordRef.value?.reset?.();
	passwordShow.value = false;
	postPromoteExtract({
		payword,
		...form.value,
	}).then((res) => {
		if (res.code == 200) {
			ctx.$toastAndBack('已提交提现申请');
		}
	});
};

onLoad(() => {
	getPromoteRewardCount().then((res) => {
		info.value = res.data;
	});
});
</script>
<style lang="scss" scoped>
@include appBem_b(user-promote-extract) {
	padding: 20rpx 20rpx 200rpx 20rpx;
	--e-form-item-padding:40rpx 0;
}
</style>
